<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Loading } from '@element-plus/icons-vue';
import { AIGenerateQuestion } from "@/api/question.js";

const drawer = ref(false);
const openDrawer = () => {
  drawer.value = true;
};

const emits = defineEmits(['generateQuestion']);
const props = defineProps({
  app: {
    type: Object,
    required: false,
    default: () => ({
      appName: "",
      appDesc: "",
      id: null,
    }),
  },
});

const userAddDate = ref({
  "userPrompt": "",
  "QuestionNumber": 10,
  "OptionNumber": 4,
});
const is_loading = ref(false);

const submitForm = async () => {
  is_loading.value = true;
  const params = {
    "AppId": props.app.id,
    ...userAddDate.value
  };

  // 显示一个可爱的等待消息
  ElMessage({
    message: 'AI 正在努力生成题目中... ⏳',
    type: 'info',
    icon: Loading,
    duration: 0, // 手动关闭，不自动关闭
    showClose: true,
  });

  try {
    const data = await AIGenerateQuestion(params);
    console.log('AIGeneratedData：', data);
    emits('generateQuestion', data.data);
    drawer.value = false;
    setTimeout(()=>{
      ElMessage.success("生成题目成功! 🎉");
    },500)
    setTimeout(()=>{
      ElMessage.warning("记得提交生成的题目哦！")
    },1000)
  } catch (error) {
    ElMessage.error("生成题目失败，请重试。 😢");
  } finally {
    is_loading.value = false;
    ElMessage.closeAll(); // 关闭所有消息
  }
};

defineExpose({
  openDrawer
});

const handleClose = () => {
  ElMessageBox.confirm('你确定要关闭?')
      .then(() => {
        drawer.value = false;
      })
      .catch(() => {
        // catch error
      });
};
</script>

<template>
  <el-drawer
      v-model="drawer"
      :title="props.app.appName"
      :before-close="handleClose"
      class="custom-drawer"
      size="45%"
  >
    <el-form
        :model="userAddDate"
        label-position="top"
        class="custom-form"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="应用 ID" class="form-item">
            <span class="info-text">{{ props.app.id }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="应用描述" class="form-item">
            <span class="info-text">{{ props.app.appDesc }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="题目数量" class="form-item">
            <el-input-number
                v-model="userAddDate.QuestionNumber"
                :min="1"
                :max="100"
                class="custom-input-number"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="每道题目选项数量" class="form-item">
            <el-input-number
                v-model="userAddDate.OptionNumber"
                :min="1"
                :max="100"
                class="custom-input-number"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24" style="height: 150px">
          <el-form-item label="用户提示词" class="form-item">
            <el-input
                style="height: 100%"
                v-model="userAddDate.userPrompt"
                type="textarea"
                :rows="3"
                placeholder="请输入提示词"
                class="custom-textarea"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form>
            <el-button type="primary" @click="submitForm" class="custom-button" :loading="is_loading">
              AI一键生成题目
            </el-button>
          </el-form>
        </el-col>
      </el-row>
    </el-form>
  </el-drawer>
</template>

<style scoped>
.custom-drawer {
  --el-drawer-padding-primary: 20px;
}

.custom-form {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.form-item {
  height: 100%;
  margin-bottom: 20px;
  font-size: 30px;
}

.form-item :deep(.el-form-item__label) {
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 8px;
}

.info-text {
  color: #606266;
  font-size: 14px;
  background-color: #f0f0f0;
  padding: 6px 12px;
  border-radius: 4px;
  display: inline-block;
}

.custom-input-number {
  width: 100%;
}

.custom-input-number :deep(.el-input-number__increase),
.custom-input-number :deep(.el-input-number__decrease) {
  background-color: #f0f0f0;
}

.custom-textarea {
  width: 100%;
}

.custom-textarea :deep(.el-textarea__inner) {
  background-color: #f0f0f0;
  border-color: #dcdfe6;
}

.custom-button {
  width: 100%;
  background-color: #409EFF;
  border-color: #409EFF;
  font-weight: bold;
}

.custom-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
</style>